<template>
  <div class="kingKong">
    <div class="item" @click="clickItem(index)" v-for="(item, index) in list" :key="item.id">
      <image class="icon" :src="item.icon" mode="scaleToFill" />
      <div class="hot" v-if="item.hotText">{{ item.hotText }}</div>
      <div class="title">{{ item.title }}</div>
      <div class="desc">{{ item.desc }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "kingKong",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  created() {
    console.log(this.list);
  },
  computed: {},
  methods: {
    clickItem(index) {
      this.$emit("clickItem", index);
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.kingKong {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 117px;
  background: #ffffff;
  border-radius: 0px 0px 15px 15px;
  logout-modal {
    display: none;
  }
  .item {
    position: relative;
    width: 7rem;
    opacity: 1;
    border-radius: 0.625rem;
    .icon {
      display: block;
      width: 54px;
      height: 54px;
      margin: 0 auto;
    }
    .hot {
      position: absolute;
      top: 0.6875rem;
      left: 4.0625rem;
      width: 1.1rem;
      height: 0.9125rem;
      background: #f26767;
      font-size: 0.5rem;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 0.8125rem;
      transform: scale(0.8);
      color: #ffffff;
      border-radius: 0.4375rem 0.4375rem 0.4375rem 0rem;
      text-align: center;
    }
    .title {
      width: 100%;
      text-align: center;
      font-size: 14px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .desc {
      font-size: 10px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #bfbfbf;
      text-align: center;
      margin-top: 3px;
    }
  }
}
</style>
